{% macro list(blogList,isCanReply) %}
{% for item in blogList %}
<div class="blog-item" style="width: 500px;">
  <div class="user-info">
    <img class="user-avatar" src="{{item.user.avatar}}" alt="" style="border-radius: 50%; " width="50px" height="50px">
  </div>
  <div class="blog-info">
    <div class="blog-content">
      <div>
        <a href="/profile/{{item.user.userName}}"><span class="username">{{item.user.nickName}}</span>:</a>
        <span class="text">{{item.formatContent | safe}}</span>
      </div>
      <!-- 图片有时显示 -->
      {% if item.image %}
      <a href="{{item.image}}" target="_blank">
        <!--  target="_blank" 表示从新的空白页打开 -->
        <img class="blog-image" src="{{item.image}}" alt="" width="100">
      </a>
      {% endif %}
    </div>
    <div class="create-time">
      <span>{{item.createdAtFormat}}</span>
      {% if isCanReply %}
      <!-- 添加回复功能 -->
      <a href="" class="reply" data-nick-name="{{item.user.nickName}}" data-user-name="{{item.user.userName}}"
        data-content="{{item.content}}">
        <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-reply-all-fill" fill="currentColor"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M8.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L8.079 4.1A.716.716 0 0 0 7 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z" />
          <path fill-rule="evenodd"
            d="M10.868 4.293a.5.5 0 0 1 .7-.106l3.993 2.94a1.147 1.147 0 0 1 0 1.946l-3.994 2.94a.5.5 0 0 1-.593-.805l4.012-2.954a.493.493 0 0 1 .042-.028.147.147 0 0 0 0-.252.496.496 0 0 1-.042-.028l-4.012-2.954a.5.5 0 0 1-.106-.699z" />
        </svg>
        回复
      </a>
      {% endif %}
    </div>
  </div>
</div>
<hr width="500px">
{% endfor %}
<script>
  //回复功能
  // on(事件，委托，function)
  // on(event,selector,fn)
  $("body").on("click", ".reply", function (e) {
    // 阻止默认行为
    e.preventDefault()
    const nickName = $(this).attr('data-nick-name');
    const userName = $(this).attr('data-user-name');
    const content = $(this).attr('data-content');
    //  //@张三 - zhangsan xxx
    const $replyStr = `// @${nickName} - ${userName} ${content}`;
    $("#blog-content").val($replyStr);
    $("#blog-content")[0].focus();
    $("#blog-content")[0].setSelectionRange(0, 0)
  })

</script>
{% endmacro %}